import React, { Component, PropTypes } from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class Number extends Component {
  static propTypes = {
    top: PropTypes.number,
    left: PropTypes.number,
    value: PropTypes.number,
  };
  constructor(props) {
    super(props);

    this.state = {
      pressed: false,
    };
  }

  render() {
    const numberColor = this.props.selected ? '#dc4437' : '#121212';

    return (
      <TouchableOpacity
        activeOpacity={0.75}
        style={
        [styles.numberTouch,
          { top: PxToDp(this.props.top),
            left: PxToDp(this.props.left),
          }]
        }
        onPress={() => { this.props.onPress(); }}
      >
        <Text style={[styles.number, { color: numberColor }]}>{this.props.value}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  numberTouch: {
    position: 'absolute',
    backgroundColor: 'transparent',
    width: PxToDp(30),
    height: PxToDp(30),
  },
  number: {
    color: '#121212',
    fontSize: 18,
  },
});
export default Number;
